<!--  -->
<template>
  <div class='tableMain'>
    <el-input placeholder="请输入用户昵称" clearable @keyup.enter.native="onSubmit" v-model="searchForm.nickName" style="width:30%;">
      <template #append>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </template>
    </el-input>
    <br>
    <el-table :data="tableData" v-loading="loading" size="small" style="width: 100%">
      <el-table-column prop="userTypeName" label="用户类型" width="180" />
      <el-table-column prop="userId" label="userId" width="180" />
      <el-table-column prop="nickName" label="昵称" width="140"></el-table-column>
      <el-table-column prop="gradeName" label="会员等级"></el-table-column>
      <el-table-column prop="expendMoney" label="已消费金额"></el-table-column>
      <el-table-column prop="control" label="操作">
        <template #default="scope">
          <el-button size="small" v-auth="'/user/audit/btns'" type="primary" @click="handlerChange(scope.row)" link>审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background @current-change="handlerCurrentChange" :page-sizes="[2, 10, 20, 50, 100]" :page-size="10" :current-page="searchForm.pageIndex" layout="total, prev, pager, next, jumper" :total="totalCount"></el-pagination>
    </div>

    <!-- 会员等级调整 -->
    <el-dialog v-model="levelShow" title="调整会员等级" width="30%" :show-close="false" :close-on-click-modal="false">
      <el-form ref="levelForm" :model="levelForm">
        <el-form-item label="会员昵称">
          <el-input disabled v-model="levelForm.nickName" />
        </el-form-item>
        <el-form-item label="当前等级">
          <el-select v-model="levelForm.nowLevel" disabled placeholder="请选择">
            <el-option v-for="item in levelOptions" :key="item.gradeId" :label="item.name" :value="item.gradeId" />
          </el-select>
        </el-form-item>
        <el-form-item label="目标等级" prop="gradeId" :rules="[ { required: true, message: '请选择等级' }, ]">
          <el-select v-model="levelForm.gradeId" placeholder="请选择">
            <el-option v-for="item in levelOptions" :key="item.gradeId" :label="item.name" :value="item.gradeId" />
          </el-select>
        </el-form-item>
        <el-form-item label="更换原因" prop="remark" :rules="[ { required: true, message: '请输入更换原因' }, ]">
          <el-input type="textarea" v-model="levelForm.remark" :rows="5" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="levelCancle">关闭</el-button>
          <el-button type="primary" @click="levelSave" v-loading="btnloading">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import UserApi from '@/api/user'
import PackageApi from '@/api/package'
import { ElMessage } from 'element-plus'
import { defaultPageSize } from '@/utils/table.js'
export default {
  name: '',
  components: {},
  data() {
    return {
      loading: false,
      totalCount: 0,
      tableData: [],
      searchForm: {
        isMember: true,
        nickName: '',
        pageIndex: 1,
        pageSize: defaultPageSize
      },
      exportShow: false,
      levelShow: false,
      fileList: [],
      levelForm: {
        nickName: '',
        nowLevel: 0,
        gradeId: '',
        userId: '',
        remark: ''
      },
      levelOptions: [],
      btnloading: false,
      importLoading: false
    };
  },
  computed: {},
  methods: {
    loadLevles() {
      const $this = this
      PackageApi.getAllGrade()
        .then(result => {
          const { code, data } = result
          if (code === 1) {
            $this.levelOptions = data.map(f => {
              return {
                name: f.name,
                gradeId: f.gradeId
              }
            })
          }
          console.log('reuslt', result)
        })
    },
    loadTableData() {
      this.loading = true
      const $this = this
      UserApi.getUserList($this.searchForm)
        .then(result => {
          $this.loading = false
          const { code, data } = result
          if (code === 1) {
            const { total, records } = data
            $this.totalCount = total
            $this.tableData = records
          }
          console.log('rsult'.result)
        })
    },
    handlerCurrentChange(current) {
      this.searchForm.pageIndex = current
      this.loadTableData(this.tabType)
    },
    onSubmit() {
      this.loadTableData()
    },
    onImport() {
      this.fileList = []
      this.exportShow = true
    },
    importCancle() {
      this.exportShow = false
    },
    importSave() {
      const $this = this
      const files = this.$refs['uploadRef']
      const list = this.fileList
      if (list <= 0) {
        ElMessage.error('请选择文件')
        return
      }
      if (files) {
        const file = list[0].raw
        $this.importLoading = true
        const formData = new FormData()
        formData.append('iFile', file)
        UserApi.importUser(formData)
          .then(result => {
            const { code, data, msg } = result
            if (code === 1) {
              ElMessage.success(msg)
            } else {

              ElMessage.error(msg)
            }
            $this.importLoading = false
            $this.exportShow = false
          }).catch(error => {
            // ElMessage.error('导入失败')
            $this.importLoading = false
          })
      }
    },
    handlerChange(row) {
      this.levelForm.nowLevel = row.gradeId
      this.levelForm.nickName = row.nickName
      this.levelForm.userId = row.userId
      this.levelShow = true
      console.log('row', row)
    },
    levelCancle() {
      this.levelShow = false
      this.levelForm = {
        nickName: '',
        nowLevel: 0,
        gradeId: '',
        userId: '',
        remark: ''
      }
    },
    levelSave() {
      const $this = this
      // UserApi.editGrade()
      const postJson = $this.levelForm
      this.$refs['levelForm'].validate((valid) => {
        if (valid) {
          $this.btnloading = true
          UserApi.editGradeNew(postJson.gradeId,
            postJson.remark,
            postJson.userId, true)
            .then(result => {
              const { code, msg } = result
              if (code === 1) {
                ElMessage.success(msg)
                $this.levelCancle()
                $this.loadTableData()
              } else {
                ElMessage.error(msg)
              }
              $this.btnloading = false
            }).catch(error => {
              $this.btnloading = false
            })
        }
      })
      console.log('保存等级', this.levelForm)
    }
  },
  created() {
    this.loadTableData()
    this.loadLevles()
  },
  mounted() {

  },
}
</script>
<style scoped></style>